<template>
    <div>
        <el-button @click="handleShow">点击弹出</el-button>

        <!--弹出窗-->
        <modal ref="modal_1"
               :title="title"
               :isCloseConfirm="false"
               :beforeClose="beforeClose"
               @modalOpen="open"
               @modalOpened="opened"
               @modalClose="close"
               @modalClosed="closed">
            <!--自定义头部， 一般不需要重写-->
            <template v-slot:header="scope">
                <div>{{scope.title}}</div>
            </template>
            <!--默认块 body-->
            <div>
                body
            </div>
            <!--底部额外显示块-->
            <template #footerContent>
                <div>这里可显示类似审批的表单</div>
            </template>
            <!--底部按钮块, 默认只有"取消"按钮-->
            <template #footerButton>
                <el-button type="primary" icon="el-icon-plus">新增</el-button>
                <el-button type="primary" icon="el-icon-circle-check">修改</el-button>
                <el-button icon="el-icon-circle-close" @click="$refs.modal_1.handleClose()">取消</el-button>
            </template>
        </modal>
    </div>
</template>

<script>
    export default {
        name: "modalDemo",
        data() {
            return {
                title: "我是标题",
                top: "4%", // 弹窗距离顶部的距离，默认偏移4%
                width: "60%" // 弹窗的宽度，默认可视宽的60%
            }
        },
        methods: {
            handleShow() {
                this.$refs.modal_1.show()
            },
            /**
             * 关闭之前触发，  如果设置了此方法，  isCloseConfirm将失效
             * @param done 关闭dialog
             */
            beforeClose(done) {
                done()
            },
            /**
             *  打开之前
             */
            open() {
                console.log("open");
            },
            /**
             *  打开之后（动画结束）
             */
            opened() {
                console.log("opened");
            },
            /**
             * 关闭监听
             */
            close() {
                console.log("close")
            },
            /**
             * 已关闭
             */
            closed() {
                console.log("closed")
            }
        }
    }
</script>

<style scoped>

</style>